<template>
  <ve-gap v-if="fixed" size="124"></ve-gap>
  <view class="ve-search" :class="{ 'fixed-top': fixed }">
    <view class="inp_search">
      <!-- 搜索icon -->
      <ve-icon name="icon-map-search" size="32" />
      <!-- 有2个及以上 -->
      <view class="inp_search_type" v-if="searchList.length > 1">
        <ve-picker-index
          @change="typeChange"
          :range="searchList"
          :value="activeQueryIndex"
          mode="selector"
          range-key="label"
          :disabled="pickerDisabled"
        >
          <text class="ui_search_text">{{ activeQuery.label }}</text>
        </ve-picker-index>
        <ve-icon name="select_down" width="20" v-if="searchList.length > 1"></ve-icon>
        <view class="inp_search_line"></view>
      </view>
      <!-- 0或1个 -->
      <view class="inp_search_type" v-else>
        <text class="ui_search_text">{{ activeQuery.label }}</text>
      </view>
      <!-- 输入框 -->
      <ve-input
        class="inp_search_inp"
        type="text"
        :placeholder="placeholder"
        placeholder-style="color:#C9CDD4;font-size:28rpx;"
        confirm-type="search"
        v-model="searchVal"
        @clear="handleClear"
        @confirm="confirmSearch"
        @input="handleInput"
        @focus="onFocus"
        @keyup.enter="confirmSearch"
      />
    </view>
    <view class="search_btn" @tap="confirmSearch">搜索</view>
  </view>
</template>

<script>
  export default {
    props: {
      modelValue: String,
      list: {
        type: Array,
      },
      placeholder: {
        type: String,
        default: '请输入',
      },
      fixed: {
        type: Boolean,
        default: false,
      },
    },
    emits: ['update:modelValue', 'search', 'confirm', 'focus'],
    data() {
      return {
        // 搜索内容
        searchVal: undefined,
        // 当前搜索
        activeQuery: {},
        activeQueryIndex: 0,
        // 2024-04-22 暂不支持下拉的输入框了
        searchList: [
          {
            prop: null,
            label: '',
            placeholder: this.placeholder,
          },
        ],
      }
    },
    mounted() {
      // this.init()
    },
    watch: {
      modelValue: {
        handler(val) {
          this.searchVal = val
        },
        immediate: true,
      },
      searchVal: {
        handler(newVal) {
          this.$emit('update:modelValue', newVal)
        },
        immediate: true,
      },
    },
    methods: {
      // 可以通过这个方法修改searchList
      init(searchList) {
        // 没有创建个默认的
        if (searchList == null || searchList.length == 0) {
          searchList = [
            {
              prop: null,
              label: '',
              placeholder: this.placeholder,
            },
          ]
        }
        this.searchList = searchList
        // 选中第一个
        this.typeChange({
          detail: {
            value: 0,
          },
        })
      },
      typeChange(val) {
        this.searchVal = ''
        const query = this.searchList[val.detail.value]
        if (this.searchList.length > 1) {
          query.placeholder = '请输入' + query.label
        } else {
          query.placeholder = this.placeholder
        }
        this.activeQuery = query
        this.activeQueryIndex = val.detail.value
        // 修改触发search
        // this.confirmSearch();
      },
      confirmSearch() {
        const req = {}
        if (this.activeQuery.prop == null) {
          this.$emit('search', this.searchVal)
          this.$emit('confirm', this.searchVal)
          return
        }
        req[this.activeQuery.prop] = this.searchVal
        this.$emit('search', req)
        this.$emit('confirm', req)
      },
      handleClear() {
        this.$emit('update:modelValue', undefined)
      },
      handleInput() {
        this.$emit('update:modelValue', this.searchVal)
      },
      onFocus() {
        this.$emit('focus')
      },
    },
  }
</script>

<style scoped lang="scss">
  .ve-search {
    padding: 22rpx 32rpx 24rpx;
    background: #fff;
    display: flex;
    border-top: 1px solid #f7f8fa;

    &.fixed-top {
      width: 100%;
      position: fixed;
      top: 0;
      // #ifdef H5
      top: 44px;
      // #endif
      left: 0;
      z-index: 1;
    }

    .inp_search {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      width: 100%;
      height: 72rpx;
      font-size: 28rpx;
      color: #191c27;
      padding: 0 28rpx;
      background: #f2f3f5;
      border-radius: 8rpx;

      .icon_search {
        margin-right: 20rpx;
        width: 28rpx;
        height: 28rpx;
      }

      &_type {
        display: flex;
        flex-direction: row;
        align-items: center;
        position: relative;
      }

      .ui_search_text {
        display: inline-block;
        font-size: 28rpx;
        font-weight: 400;
        color: #191c27;
        max-width: 170rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-left: 18rpx;
      }

      &_line {
        margin: 0 20rpx;
        width: 2rpx;
        height: 40rpx;
        background: #e8ebf3;
      }

      &_inp {
        width: 100%;
        text-align: left;
      }
    }
  }
  .search_btn {
    font-size: 30rpx;
    font-weight: 400;
    color: #3072f6;
    line-height: 72rpx;
    word-break: keep-all;
    margin-left: 32rpx;
  }
</style>
